<script setup lang="ts">
import { collectionStore } from '@/stores/col';
import { collectionFn, comdataFn, deletcommunityFn, modcommunityFn } from '@/api/communityApi';
import { modStore } from '@/stores/modcom';
import { showToast } from 'vant';

import { ref, type Ref } from 'vue';
import { useRouter } from 'vue-router';
const colstore = collectionStore()

const showShare: Ref<boolean> = ref(false)
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];
const onSelect = (option: any) => {
    showToast(option.name);
    showShare.value = false;
};



// 收藏
const starflog: Ref<boolean> = ref(false)


async function collectionClick(item: any, index: number) {

    starflog.value = !item.starflog
    console.log(1);
    await collectionFn({ index, starflog }).then(res => {

        console.log('colres', res);
        colstore.changecollfn(res.data.data)

        
    })




}

</script>


<template>
    <div class="container">

        <header class="navtop">
            <van-nav-bar title="我的收藏" left-arrow @click-left="$router.back()" z-index="99" fixed :border="false"
                safe-area-inset-top />
        </header>

        <div class="card" v-for="(item, index) in colstore.collist" :key="index">
            <div class="card-header">
                <div class="card-header-left">
                    <div class="header-left-image">
                        <van-image round width="0.3rem" height="0.3rem" fit="cover" :src="item.photo" />
                    </div>
                    <div class="header-left-text">
                        <h3>{{ item.id }}</h3>
                        <p>{{ item.time }}</p>
                    </div>
                </div>
            </div>
            <p style="font-size: 0.15rem;font-weight: 700;">
                {{ item.title }}
            </p>
            <div class="content">
                <div class="content-left">
                    <van-image height="100%" fit="cover" :src="item.img1" />
                </div>
                <div class="content-right">
                    <van-image width="100%" fit="cover" :src="item.img2" />
                    <van-image width="100%" fit="cover" :src="item.img3" />
                </div>
            </div>
            <div style="margin: 10px 0px;">
                    <van-icon @click="showShare = true" name="share-o">{{ item.share
                        }}</van-icon>
                    <van-icon style="margin: 0px 15px;" name="chat-o">{{ item.chat }}</van-icon>
                    <van-icon @click="collectionClick(item, index)"
                        :name="item.starflog ? 'star' : 'star-o'"></van-icon>
                </div>
            <div>
            </div>
        </div>

        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    </div>

</template>
<style scoped lang="scss">
.container {
    padding: 0 5%;
}

.navtop {
    height: 100px;

    .van-nav-bar {
        --van-nav-bar-icon-color: #1b1b1b;
        --van-nav-bar-background: rgbr(0, 0, 0, 0);
    }
}



.card {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 3px 6px 12px 1px rgba(0, 0, 255, .1);
}

.card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-header-left {
        display: flex;
        align-items: center;

        .header-left-image {
            margin-right: 10px;

        }

        .header-left-text {
            p {
                margin: 0;
            }
        }
    }

    .header-right-text {
        p {
            font-size: 0.20rem;
        }
    }
}

h1 {
    margin: 0;
    font-size: 0.35rem;
}


.content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .content-left {
        width: 49%;
        height: 200px;

    }

    .content-right {
        width: 49%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .van-image {
            height: 49%;
        }
    }
}

.input {
    margin: 0;
}

.van-cell {
    width: 100%;
    background: #eff7fc;

}
</style>